<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Toho like shooting with JavaScript</title>
<script type="text/javascript" src="lib/glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="utility/Inherit.js"></script>
<script type="text/javascript" src="utility/Draw.js"></script>
<script type="text/javascript" src="utility/Random.js"></script>
<script type="text/javascript" src="utility/FreeList.js"></script>
<script type="text/javascript" src="utility/WebGL.js"></script>
<script type="text/javascript" src="utility/Peer.js"></script>
<script type="text/javascript" src="data/danmaku_helper.js"></script>
<script type="text/javascript" src="data/bullets_params.js"></script>
<script type="text/javascript" src="data/enemies_params.js"></script>
<script type="text/javascript" src="data/bosses_params.js"></script>
<script type="text/javascript" src="data/talk_params.js"></script>
<script type="text/javascript" src="data/stage_params.js"></script>
<script type="text/javascript" src="source/GameSocket.js"></script>
<script type="text/javascript" src="source/Game.js"></script>
<script type="text/javascript" src="source/MoveVector.js"></script>
<script type="text/javascript" src="source/Element.js"></script>
<script type="text/javascript" src="source/Background.js"></script>
<script type="text/javascript" src="source/Fighter.js"></script>
<script type="text/javascript" src="source/FighterOption.js"></script>
<script type="text/javascript" src="source/Enemy.js"></script>
<script type="text/javascript" src="source/Boss.js"></script>
<script type="text/javascript" src="source/Effect.js"></script>
<script type="text/javascript" src="source/Bullet.js"></script>
<script type="text/javascript" src="source/Bomb.js"></script>
<script type="text/javascript" src="source/EnemyBullet.js"></script>
<script type="text/javascript" src="source/Item.js"></script>
<script type="text/javascript" src="source/SpellCard.js"></script>
<script type="text/javascript" src="source/GameState.js"></script>
<script type="text/javascript" src="source/LoadingState.js"></script>
<script type="text/javascript" src="source/OpeningState.js"></script>
<script type="text/javascript" src="source/CharacterSelectState.js"></script>
<script type="text/javascript" src="source/ReplaySelectState.js"></script>
<script type="text/javascript" src="source/PostReplayState.js"></script>
<script type="text/javascript" src="source/StageState.js"></script>
<script type="text/javascript" src="source/EndingState.js"></script>
<script type="text/javascript" src="source/StaffRollState.js"></script>
<script type="text/javascript">

// for console
var __game;
var __connectButton, __statusSpan;
var __alreadyConnected = false;


// TODO: temporal
var __reloadWithRandomRoomNo = function(baseURL, params) {
  var args = '';
  if(params.lag !== null)
    args = '&l=' + params.lag;

  location.href = baseURL + '?' + (Math.random() * 10000 | 0) + args;
};


// TODO: temporal
var __validateURL = function(params) {
  var array = location.href.split('?');
  var baseURL = array[0];

  if(array.length <= 1) {
    __reloadWithRandomRoomNo(baseURL, params);
    return false;
  }

  var args = array[1].split('&');

  if(args.length > 1) {
    for(var i = 1; i < args.length; i++) {
      var p = args[i].split('=');
      if(p[0] === 'l' && ! isNaN(p[1])) {
        params.lag = parseInt(p[1]);
        if(params.lag < 1)
          params.lag = 1;
        if(params.lag > 20)
          params.lag = 20;
      }
    }
  }

  var room = args[0];
  if(room === '' || isNaN(room)) {
    __reloadWithRandomRoomNo(baseURL, params);
    return false;
  }
  params.room = parseInt(room);
  return true;
};


var __init = function( ) {
  // TODO: temporal
  var params = {room: null, lag: null};
  if(! __validateURL(params)) {
    return -1;
  }

  var room = params.room;
  document.getElementById('room').innerText = room;

  __statusSpan = document.getElementById('status');
  __connectButton = document.getElementById('connectButton');

  __statusSpan.innerText = '0 in the room.';
  __connectButton.disabled = true;

  var mainCanvas = document.getElementById( 'mainCanvas' ) ;
  var bgCanvas = document.getElementById('bgCanvas');
  var game = new Game(mainCanvas, bgCanvas);
  game.setRoom(room);
  if(params.lag !== null)
    game.setLag(params.lag);

  __game = game ;

  game.onWsReady = function(event) { __wsReady(event); };
  game.onRoomUpdate = function(num) { __updatedRoom(num); };
  game.onConnected = function(event) { __connected(event); };
  game.onSentParams = function() { __waitingForOther(); };
  game.onRan = function() { __ranTheGame(); };

  window.onkeydown = function(event) { game.handleKeyDown(event); };
  window.onkeyup = function(event) { game.handleKeyUp(event); };

  __game.run();
} ;


var __wsReady = function(event) {
//  __connectButton.disabled = false;
};


var __connect = function() {
  __connectButton.disabled = true;
  __statusSpan.innerText = 'connecting.';
  __game.connect();
};


var __updatedRoom = function(num) {
  if(! __alreadyConnected) {
    __statusSpan.innerText = num + ' in the room.';
    if(num < 2) {
      __connectButton.disabled = true;
      __statusSpan.innerText += ' (need one more person)';
    } else if(num == 2) {
      __connectButton.disabled = false;
      __statusSpan.innerText += ' (ready to push connect button)';
    } else {
      __connectButton.disabled = true;
      __statusSpan.innerText += ' (over capacity)';
    }
  }
};


var __connected = function() {
  __alreadyConnected = true;
  __connectButton.disabled = true;
  __statusSpan.innerText = 'connected.';
};


var __waitingForOther = function() {
  __statusSpan.innerText = 'waiting for other\'s character select.';
};


var __ranTheGame = function() {
  __statusSpan.innerText = 'ran.';
};


</script>
</head>

<body onLoad="__init()">

Room No. <span id="room"></span>
<button id="connectButton" onclick="__connect()">connect</button>
<span id="status"></span>

<div id="canvasdiv" style="position:relative; width:640px; height:480px">
<canvas id="mainCanvas" width="640" height="480"
 style="z-index: 2; position:absolute;left0px;top0px;"></canvas>
<canvas id="bgCanvas" width="480" height="480"
 style="z-index: 1; position:absolute;left0px;top0px;"></canvas>
</div>

<p>
How to play
</p>
<ul>
<li>Cursor key: move / character select</li>
<li>Z:          shot / ok</li>
<li>X:          bomb / cancel</li>
<li>Shift:      slow</li>
<li>Space:      character change(for debug)</li>
<li>Y:          viewpoint change</li>
</ul>

<p>
Turn your hardware acceleration on to fully enjoy this game.<br />
See &quot;chrome://gpu&quot; and &quot;chrome://flags&quot; on your chrome to check if your hardware acceleration is enabled.
</p>

<p>
Thanks for all the images and musics.
</p>
<ul>
<li>SE, etc  <a href="http://www.danmakufu.net/?%E5%88%B6%E4%BD%9C%2F%E3%83%AA%E3%83%B3%E3%82%AF">http://www.danmakufu.net/?%E5%88%B6%E4%BD%9C%2F%E3%83%AA%E3%83%B3%E3%82%AF</a></li>
<li>SE       <a href="http://commons.nicovideo.jp/material/nc1456">http://commons.nicovideo.jp/material/nc1456</a></li>
<li>Face     <a href="http://kinginsan.blog60.fc2.com/">http://kinginsan.blog60.fc2.com/</a></li>
<li>Standup  <a href="http://gensoukyou.1000.tv/">http://gensoukyou.1000.tv/</a></li>
<li>Marisa   <a href="http://commons.nicovideo.jp/material/nc71167">http://commons.nicovideo.jp/material/nc71167</a></li>
<li>Reimu    <a href="http://commons.nicovideo.jp/material/nc70557">http://commons.nicovideo.jp/material/nc70557</a></li>
<li>Bullet   <a href="http://commons.nicovideo.jp/material/nc74535">http://commons.nicovideo.jp/material/nc74535</a></li>
<li>BG       <a href="http://subtlepatterns.com/hixs-evolution/">http://subtlepatterns.com/hixs-evolution/</a></li>
<li>BG       <a href="http://gi0.net/">http://gi0.net/</a></li>
<li>BG       <a href="http://commons.nicovideo.jp/material/nc21291">http://commons.nicovideo.jp/material/nc21291</a></li>
<li>BGM      <a href="http://commons.nicovideo.jp/material/nc25738">http://commons.nicovideo.jp/material/nc25738</a></li>
<li>BGM      <a href="http://commons.nicovideo.jp/material/nc13447">http://commons.nicovideo.jp/material/nc13447</a></li>
<li>BGM      <a href="http://commons.nicovideo.jp/material/nc22928">http://commons.nicovideo.jp/material/nc22928</a></li>
</ul>

<p>
This game is made by <a href="http://twitter.com/superhoge">@suprehoge</a>
</p>

<p>
<a href="https://github.com/takahirox/toho-like-js">Source code</a>
</p>

</body>
</html>
